<!-- 音乐列表 -->
<template>
    <div class="w-full">
        <!-- 歌曲标题 -->
        <div class="h-14 flex p-2">
            <div class="w-1/4 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center">
                <p class="mr-6 min-w-[25%]">#</p>
            </div>
            <div class="w-[54%] line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center">音乐标题</div>
            <div class="w-1/3 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center pl-3">歌手</div>
            <div class="w-1/3 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center pl-3">专辑</div>
            <div class="w-1/6 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center justify-center">时长</div>
            <div class="w-1/4 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center pl-5" v-if="slider">热度
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="w-full h-fit rounded-lg" ref="contRef">
            <ul v-if="songList.length">
                <li ref="liStyle" @click="setListBg(index)" @contextmenu="openRightMenu(item, index)"
                    @dblclick="playMusic(item)" v-for="(item, index) in songList" :key="item.id"
                    class="flex w-full h-10  p-2 rounded-lg hover:bg-[var(--inputBg)] duration-300 my-1">
                    <div class="w-1/4 flex items-center">
                        <p class="mr-6 text-[var(--iconBg)] min-w-[25%] ">{{ index + 1 }}</p>
                        <i
                            class="iconfont icon-aixin mr-3 before:text-lg text-[var(--playBg)] hover:cursor-pointer"></i>
                        <i class="iconfont icon-xiazai before:text-lg text-[var(--playBg)] hover:cursor-pointer"></i>
                    </div>
                    <div class=" w-[54%] flex items-center select-none">
                        <p class="text-[var(--text)] mr-2 max-w-full line-clamp-1">{{ item.name }}</p>
                        <span v-if="item.ar[0].alias?.length !== 0"
                            class=" mr-1 min-w-fit border border-[var(--playBg)] px-1 rounded-md text-xs text-[var(--playBg)] ">原唱</span>
                        <span v-if="!item.privilege?.pl"
                            class=" mr-1 min-w-fit border border-red-700 px-1 rounded-md text-xs text-red-700">vip</span>
                        <span v-if="!item.privilege?.pl"
                            class=" mr-1 min-w-fit border border-red-700 px-1 rounded-md text-xs text-red-700 ">试听</span>
                        <span v-if="item.sq !== null"
                            class=" mr-1 min-w-fit border border-[var(--playBg)] px-1 rounded-md text-xs text-[var(--playBg)] ">SQ</span>
                        <span @click="goMvPage(item.mv)" v-if="item.mv"
                            class="cursor-pointer mr-1 min-w-fit border border-[var(--playBg)] px-1 rounded-md text-xs text-[var(--playBg)] ">MV</span>
                        <span v-if="item.privilege?.dlLevel !== 'none'"
                            class=" mr-1 min-w-fit border border-[var(--playBg)] px-1 rounded-md text-xs text-[var(--playBg)] ">Hi-Res</span>
                    </div>
                    <div class="w-1/3 flex items-center pl-3 overflow-hidden">
                        <p @click="router.push({ name: 'singerInfo', query: { id: i.id } })"
                            v-for="(i, index) in item.ar" :key="i.id"
                            class="w-max-[1/3] hover:text-black line-clamp-1 text-[var(--iconBg)] hover:cursor-pointer">
                            {{
                                i.name }}<span v-if="index !== item.ar.length - 1"> /&nbsp;</span></p>
                    </div>
                    <div class=" pl-3 pr-1 w-1/3 flex items-center">
                        <p class="w-fit line-clamp-1 text-ellipsis text-[var(--iconBg)] hover:cursor-pointer">{{
                            item.al.name }}</p>
                    </div>
                    <div class=" w-1/6 flex items-center justify-center">
                        <p class="w-max-[1/3] line-clamp-1 text-ellipsis text-[var(--iconBg)]">{{
                            setDuration((item.dt) as number)
                        }}</p>
                    </div>
                    <div class=" w-1/4 flex items-center pl-5" v-if="slider">
                        <el-slider class="w-9" v-model="item.pop" :show-tooltip="false" disabled />
                    </div>
                </li>
            </ul>
            <!-- 空状态 -->
            <el-empty :image-size="60" v-else description="暂未搜索到歌曲"></el-empty>
            <Teleport to="body">
                <Transition name="fade">
                    <!-- 右键菜单 -->
                    <RightMenu :style="{ top: pos.posY + 'px', left: pos.posX + 'px' }" v-if="visible"
                        v-sizeDirect="handleSizeChange" :musicInfo="musicInfo">
                    </RightMenu>
                </Transition>
            </Teleport>
        </div>
        <!-- VIP歌曲对话框 -->
        <el-dialog v-model="centerDialogVisible" width="32%" center :open-delay="150" :modal="false">
            <div class="h-fit pb-6 flex flex-col justify-center">
                <div class="w-full h-16 flex justify-center items-center text-lg">
                    <img class="object-contain h-10 w-10 mr-1 rounded-md" :src="obj?.al.picUrl" alt="">
                    <span>正在试听 [</span>
                    <p class="mx-2 max-w-[5rem] line-clamp-1">{{ obj?.name }}</p>
                    <span>] 歌曲片段</span>
                    <img class="object-contain h-12 w-12 ml-1" src="../assets/image/music.gif" alt="">
                </div>
                <div class="border-b border-b-slate-500 relative h-7 w-3/5 my-0 mx-auto mb-4">
                    <p class="absolute text-xs left-1/2 top-[1.2rem] z-50 translate-x-[-50%] px-3"
                        style="background: rgb(121,196,198);">
                        开通VIP畅听完整版</p>
                </div>
                <div class="w-[67%] my-0 mx-auto h-32 flex justify-between items-center">
                    <div class="flex flex-col justify-center items-center">
                        <p
                            class="iconfont icon-MembershipCenter bg-slate-300 rounded-full text-center py-3 px-4 before:text-3xl mb-2">
                        </p>
                        <p>会员曲库</p>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <p
                            class="iconfont icon-MembershipCenter bg-slate-300 rounded-full text-center py-3 px-4 before:text-3xl mb-2">
                        </p>
                        <p>会员曲库</p>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <p
                            class="iconfont icon-MembershipCenter bg-slate-300 rounded-full text-center py-3 px-4 before:text-3xl mb-2">
                        </p>
                        <p>会员曲库</p>
                    </div>
                </div>
                <el-button @click="centerDialogVisible = false" round
                    class="w-3/4 my-0 mx-auto h-32 flex justify-between items-center tracking-widest"
                    type="warning">开通VIP畅听完整版</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance, computed } from 'vue'
import { setDuration } from '@renderer/hooks'
import { songInfo } from '@renderer/store/modules/eveylSong/type'
import { useRight } from "@renderer/utils/useRight"
import { useViewport } from "@renderer/utils/useViewport"
import { useRouter } from "vue-router"
const router = useRouter()
const liStyle = ref<Array<HTMLUListElement>>([])
const contRef = ref<HTMLDivElement>({} as HTMLDivElement)
const { x, y, visible } = useRight(contRef)
const { vw, vh } = useViewport()
const w = ref(0)
const h = ref(0)
let obj = ref<songInfo>({} as songInfo)
let musicInfo = ref({} as songInfo)
const centerDialogVisible = ref(false)
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
let { songList, slider } = defineProps<{
    songList: Array<songInfo>
    slider: false
}>()
type obType = {
    width: number
    height: number
}
//  计算右键菜单偏移量
const pos = computed(() => {
    let posX = x.value
    let posY = y.value
    if (x.value > vw.value - w.value) {
        posX = x.value - w.value
    }
    if (y.value > vh.value - h.value - 106) {
        posY = y.value - h.value
    }
    return {
        posX,
        posY
    }
})
// 双击歌曲事件
const playMusic = (item: songInfo) => {
    obj.value = item
    if (item.privilege?.freeTrialPrivilege.cannotListenReason == 0 || !item.privilege?.pl) {
        centerDialogVisible.value = true
    }
    let playList = songList
    localStorage.setItem('playList', JSON.stringify(playList));
    bus.emit('MusicInfo', item)
}
// 排他改变li样式
const setListBg = (index: number) => {
    liStyle.value?.forEach((item, i) => {
        item.style.backgroundColor = ''
        if (index == i) {
            liStyle.value[i].style.backgroundColor = 'var(--inputBg)'
        }
    })
}
// 改变li样式
const changeList = (value: number) => {
    if (liStyle.value) {
        liStyle.value.forEach(item => {
            item.style.padding = `${value}px 0`
        })
    }
}
// 暴露子组件方法
defineExpose({ changeList })
function handleSizeChange(e: obType) {
    w.value = e.width
    h.value = e.height
}
// 右键菜单事件
const openRightMenu = (item: songInfo, index: number) => {
    setListBg(index)
    musicInfo.value = item
}
// 跳转歌曲MV
const goMvPage = (id: number) => {
    router.push({ name: 'mv', query: { id } })
}
</script>

<style scoped lang='less'>
:deep(.el-slider__button-wrapper) {
    display: none;
}

:deep(.el-slider__runway) {
    flex: 0.8;
    background: var(--hoverBg);
}

:deep(.el-dialog) {
    padding: 0;
    border-radius: 15px;
    border: none;
    margin-top: 15% !important;
}

:deep(.el-dialog--center .el-dialog__body) {
    background: rgb(121, 196, 198);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

:deep(.el-dialog__header) {
    height: 2.5rem;
    margin: 0;
    background: url('../assets/image/vip.png') no-repeat;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-position: 100% 5%;
    background-size: cover;
}

:deep(.el-dialog__headerbtn) {
    top: 0;
    font-size: 25px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>